import { Divider, Layout, theme } from 'antd';
import React from 'react';
import { Navigate, Outlet, useLocation } from 'umi';
import '../locales/config';
// import Header from './components/header';

import styles from './index.less';
import { Routes } from '@/routes';
import authorizationUtil from '@/utils/authorization-util';

const { Content } = Layout;

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  // console.log(1111)
  const location = useLocation();
  const isAuthenticated = authorizationUtil.getToken();
  // console.log('isAuthenticated', isAuthenticated);

  if (!isAuthenticated && location.pathname !== Routes.Login) {
    return <Navigate to={Routes.Login} replace />;
  }
  if (isAuthenticated && location.pathname === Routes.Login) {
    return <Navigate to="/talk" replace />;
  }

  return (
    <Layout className={styles.layout}>
      <Layout>
        {/* <Header></Header> */}
        <Divider orientationMargin={0} className={styles.divider} />
        <Content
          style={{
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            overflow: 'auto',
            display: 'flex',
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;
